<template>
	<view class="container">
		<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
		<u--form labelPosition="left" :model="userInfo" :rules="rules" ref="form1" labelWidth="180rpx">
			<u-form-item label="项目" prop="projInfo.title" borderBottom>
				<u--input v-model="projInfo.title" border="none" readonly inputAlign="right"></u--input>
			</u-form-item>
			<u-form-item label="预约时间" prop="createTime" borderBottom ref="item1" @click="showTime = true;">
				<u--input v-model="userInfo.createTime" border="none" disabled disabledColor="#ffffff"
					inputAlign="right" placeholder="请选择时间">
				</u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="预约人姓名" prop="name" borderBottom ref="item1">
				<u--input v-model="userInfo.name" border="none" inputAlign="right" placeholder="请输入联系人名称">
				</u--input>
			</u-form-item>
			<u-form-item label="预约人性别" prop="sex" borderBottom @click="showSex = true;" ref="item1">
				<u--input v-model="userInfo.sex" disabled disabledColor="#ffffff" placeholder="请选择性别" border="none"
					inputAlign="right"></u--input>
				<u-icon slot="right" name="arrow-right"></u-icon>
			</u-form-item>
			<u-form-item label="联系方式" prop="phone" borderBottom ref="item1">
				<u--input v-model="userInfo.phone" border="none" inputAlign="right" placeholder="请输入联系人电话">
				</u--input>
			</u-form-item>
			<u-form-item prop="meno" :borderBottom="false" ref="item1">
				<view class="meno">
					备注
					<u--textarea class="mt-10" v-model="userInfo.meno" placeholder="如有问题请留言"></u--textarea>
				</view>
			</u-form-item>
		</u--form>

		<u-button @click="submit" color="#FD4080" class="mt-20">
			<text>￥{{projInfo.price}}</text>
			<text class="ml-5 mr-5">|</text>
			<text>立即支付</text>
		</u-button>
		<!-- 时间 -->
		<u-datetime-picker :show="showTime" :closeOnClickOverlay="true" @close="showTime=false" @cancel="showTime=false"
			v-model="datatime" :minDate="minDate" :maxDate="maxDate" mode="datetime" @confirm="confirmTime">
		</u-datetime-picker>
		<!-- 性别 -->
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false" @select="sexSelect">
		</u-action-sheet>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showTime: false,
				datatime: Number(new Date()),
				minDate: Number(new Date()),
				maxDate: Number(new Date() - 0 + 2626560000),
				showSex: false,
				projInfo: {},
				userInfo: {
					name: '',
					sex: '',
					createTime: '',
					phone: '',
				},
				actions: [{
					id: 1,
					name: '男'
				}, {
					name: '女',
					id: 0
				}],
				rules: {
					'name': {
						type: 'string',
						required: true,
						message: '请填写预约人姓名',
						trigger: ['blur', 'change']
					},
					'sex': {
						type: 'string',
						max: 1,
						required: true,
						message: '请选择预约人性别',
						trigger: ['blur', 'change']
					},
					'createTime': {
						type: 'string',
						required: true,
						message: '请选择预约时间',
						trigger: ['change']
					},
					'phone': [{
							required: true,
							message: '请输入预约人手机号',
							trigger: ['change', 'blur'],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								// 上面有说，返回true表示校验通过，返回false表示不通过
								// uni.$u.test.mobile()就是返回true或者false的
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					]
				},
				radio: '',
				switchVal: false
			};
		},
		// 接受参数
		onLoad(option) {
			console.log(option)
			this.projInfo = JSON.parse(option.projInfo)
		},
		methods: {
			sexSelect(e) {
				this.userInfo.sex = e.name
				this.$refs.form1.validateField('userInfo.sex')
			},
			confirmTime(e) {
				console.log(e)
				this.showTime = false
				this.$refs.form1.validateField('userInfo.createTime')
			},
			submit() {
				uni.$u.toast('校验通过')
				uni.navigateTo({
					url: '/pages/subscribe/payList',
				});
				
				this.$refs.form1.validate().then(res => {
					uni.$u.toast('校验通过')
					uni.navigateTo({
						url: '/pages/subscribe/payList',
					});
				}).catch(errors => {
					return
					// uni.$u.toast('校验失败')
				})
			}
		}
	}
</script>

<style>
	.container {
		padding: 0rpx 40rpx;

	}

	.meno {
		width: 100%;
	}
</style>
